<template>
	<view>
		
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr" >
		
					<u-index-item>
		
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
		
						<view class="list-cell" v-for="(cell, index2) in item" :key="item.id"
							:class="[activeUser==cell.account?'active':'deActive']"   @longpress="createGroup($event)">
							
							<view class="radioGroup" v-show="showRadioGroup" @click="changeRadio(cell)">
								  <view  :class="[cell.isChecked?'checkRadio':'','Radio']"></view>
																
							</view>
							
							<view class="headerImg">
								<u-avatar  :src="cell.picture" shape="square"></u-avatar>
		
							</view>
							<view class="name"  @click="flag&&goChat(cell)">
								
								{{cell.account}}
							</view>
						</view>
						
					</u-index-item>
				</template>
				
			</u-index-list>
		<view style="height: 150rpx;" v-show="showRadioGroup"></view> <!-- 占位元素 -->
		
			<view class="GroupBtn" v-show="showRadioGroup">
				<view class="create" @click="toCreate">创建群组</view>
				<view class="fail" @click="cancel">取消</view>
			</view>
	</view>
</template>

<script>
	
	export default {
			data(){
				return {
					activeUser: '',
					indexList: [],
					itemArr: [],
					showRadioGroup:false,//是否显示添加群组的单选框按钮
					checkUserList:[],//被选中的用户数组
					flag:true,//添加一个标识符，当我们触发长按是将其设置为false 这样就不会触发点击事件
				}
			},
			mounted(){
	
				this.getFriendList()
			},
			methods:{
				getFriendList(){
					this.$myRquest({
						url: '/friend/friend_list',
						method: "get"
					}).then(res => {
						var list =res.data.data.list
						var typeList=[]
						var itemArr=[]
						list.forEach(item=>{
							if(typeList.some(type=>item.type==type)) return
							 typeList.push(item.type)
						})
						typeList.forEach(type=>{
							
							var typeItemList=list.filter(item=>item.type==type)
							typeItemList.forEach((item)=>{item.isChecked=false})
							itemArr.push(typeItemList)
							
						})
					
						this.itemArr=itemArr
						this.indexList=typeList
						
					})
				},
				goChat(user) {
				
					this.activeUser = user.account
					user.accept_type=1 //用于区分群还是个人
					this.$store.commit('chat/setChatObjectData',user)
					uni.navigateTo({
						url:'/pages/chat/index'
					})
				},
				
				createGroup(){
					  this.flag=false
					this.showRadioGroup=true
				},
				changeRadio(cell){//选择/取消选择 用户 
				cell.isChecked=!cell.isChecked
					if(cell.isChecked){
						this.checkUserList.push(cell)
					}else{
						var index=this.checkUserList.findIndex((user)=>user.id==cell.id)
						this.checkUserList.splice(index,1)
					}
				},
				cancel(){//临时取消创建群组
					this.flag=true
					this.checkUserList=[]
					this.showRadioGroup=false
					this.itemArr.forEach((item)=>{
						item.forEach((item2)=>{item2.isChecked=false})
					})
					
				},
				toCreate(){//开始去创建群组了
					this.$store.commit('group/setGroupMembersList',[...this.checkUserList])
					uni.navigateTo({
						url:'/pages/createGroup/createGroup'
					})
					this.cancel()
					// console.log(this.$store.state.group.groupMembersList)
				}
				
			}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
	
		.headerImg {
			image {
				height: 100%;
				width: 50rpx;
			}
	
			margin-right: 10rpx;
		}
	
		.name {
			width:580rpx;
			height: 100%;
			line-height: 80rpx;
		}
	}
	
	.deActive {
		background-color: #FFF;
	}
	
	.active {
		background-color: #BBBCBE;
	}
	
	.addFriend {
		width: 70rpx;
		height: 70rpx;
		background-color: #E1B0DF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		color: white;
		
	}
	.radioGroup{
		display: flex;
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		
	
	}
	.Radio{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50% 50%;
		border: 1px solid #12D269;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.checkRadio{
		background-color:#12D269 ;
	}
	.GroupBtn{
		width: 80vw;
		height: 100rpx;
		
		position: fixed;
		bottom:120rpx;
		left: calc(50vw - 40vw);
		display: flex;
		justify-content: space-between;
		view{
			width: 40%;
			height: 100%;
			
			border-radius: 10rpx;
			line-height: 100rpx;
			text-align: center;
		}
		.create{
			background-color:#12D269 ;
			color: white;
		}
		.fail{
			background-color: #DEDEDE;
			color:#555555;
		}
	}
</style>
